<script lang="ts">
export default {
  name: 'Study2StuDemo4'
}
</script>

<template>
  <h2>模板语法总结</h2>
  <div class="note">
    <h3>v-text</h3>
    <p>1. 更新元素的文本内容</p>
    <p>2. 原始HTML{{}} 与 v-text指令等同</p>
    <p>3. 内部不能写文本或是其它标签，否则会报错</p>
  </div>
  <div class="note">
    <h3>v-html</h3>
    <p>1. 更新元素的 innerHTML</p>
    <p>2. 可以渲染原始HTML，但不推荐使用，因为容易导致XSS攻击</p>
    <p>3. 内部不可以写文本或是其它标签，会报错</p>
    <p>
      4.
      v-html指令会编译html标签，而v-text指令，{{}}以及模板字符串引用rawhtml变量都不会编译html标签，只会解析变量
    </p>
  </div>
  <div class="note">
    <h3>v-show</h3>
    <p>1. 基于表达式值的真假性，来改变元素的可见性</p>
    <p>2. 控制显示或隐藏，false时，代码依然存在</p>
  </div>
  <div class="note">
    <h3>v-if</h3>
    <p>1. 基于表达式值的真假性，来条件性地渲染元素或者模板片段。</p>
    <p>2. 控制显示或隐藏，false时，代码不存在</p>
    <p>3. 当 v-if 元素被触发，元素及其所包含的指令/组件都会销毁和重构。</p>
    <p>4. v-if 比 v-for 优先级更高。我们并不推荐在一元素上同时使用这两个指令</p>
  </div>
  <div class="note">
    <h3>v-for</h3>
    <p>1. 基于原始数据多次渲染元素或模板块。</p>
    <p>
      2. 循环形式：1° (item, index) in items；2° (value, key) in object；3° (value, key, index) in
      object
    </p>
  </div>
  <div class="note">
    <h3>v-on</h3>
    <p>1. 给元素绑定事件监听器。</p>
    <p>2. v-on简写形式 @</p>
    <p>3. 修饰符：</p>
    <p>.stop - 调用 event.stopPropagation()。阻止事件冒泡。</p>
    <p>.prevent - 调用 event.preventDefault()。阻止默认事件（例如，提交表单）</p>
    <p>.capture - 在捕获模式添加事件监听器。</p>
    <p>.self - 只有事件从元素本身发出才触发处理函数。</p>
    <p>.{keyAlias} - 只在某些按键下触发处理函数。</p>
    <p>.once - 最多触发一次处理函数。</p>
    <p>.left -只在鼠标左键事件触发处理函数。</p>
    <p>.right - 只在鼠标右键事件触发处理函数。</p>
    <p>.middle - 只在鼠标中键事件触发处理函数。</p>
    <p>.passive - 通过 { passive: true } 附加一个 DOM 事件。以被动方式添加事件监听器，可以提高滚动性能</p>
    <p>.native - 用于监听子组件的原生事件（在组件上使用时）。</p>
  </div>
  <div class="note">
    <h3>v-bind</h3>
    <p>1. 动态的绑定一个或多个 attribute，也可以是组件的 prop。</p>
    <p>2. " v-bind: "可简写为"："</p>
    <p>3. 应用场景：绑定 HTML 属性；绑定组件的 Props；绑定动态类和样式</p>
  </div>
  <div class="note">
    <h3>v-model</h3>
    <p>1. 在表单输入元素或组件上创建双向绑定。</p>
    <p>2. input中的v-model="inputVal" 等同于:value="inputVal"</p>
    <p>3. 仅限：input、select、textarea、components</p>
    <p>4. 修饰符：</p>
    <p>.lazy - 监听 change 事件而不是 input</p>
    <p>.number - 将输入的合法字符串转为数字</p>
    <p>.trim - 移除输入内容两端空格</p>
  </div>
  <div class="note">
    <h3>v-slot</h3>
    <p>1. 用于声明具名插槽或是期望接收 props 的作用域插槽。</p>
    <p>2. 仅限：template、components (用于带有 prop 的单个默认插槽)</p>
  </div>
  <div class="note">
    <h3>v-pre</h3>
    <p>1. 跳过该元素及其所有子元素的编译。</p>
  </div>
  <div class="note">
    <h3>v-once</h3>
    <p>1. 仅渲染元素和组件一次，并跳过之后的更新。</p>
    <p>2. 元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。</p>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.group {
  border: 4px solid rgb(102, 215, 85);
  margin: 10px;
  padding: 10px;
}
.group3 {
  border: 2px solid rgb(64, 163, 199);
  margin: 10px;
  padding: 10px;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
